<template>
  <el-row class="warp">
    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item>
        <el-breadcrumb-item>用户地址列表</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>

    <el-col :span="24" class="warp-main" v-loading="loading" element-loading-text="拼命加载中">
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
          <el-form :inline="true" :model="filters">
            <el-form-item>
              <el-input v-model="filters.name" placeholder="用户名/姓名/昵称" style="min-width: 240px;" @keyup.enter.native="handleSearch"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="filters.address" placeholder=地址 style="min-width: 240px;" @keyup.enter.native="handleSearch"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSearch">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="showAddDialog">新增</el-button>
            </el-form-item>
            <el-form-item>
              <el-button  type="primary"  icon="document" @click="handleDownload">导出excel</el-button>
            </el-form-item>
          </el-form>
        </el-col>

      <!--列表-->
      <el-table :data="users" highlight-current-row v-loading="loading" style="width: 100%;">
        <el-table-column type="index" width="60">
        </el-table-column>
        <el-table-column prop="userName" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="walletAddressHash" label="地址" width="350">
        </el-table-column>
        <el-table-column prop="accountType" label="币种" sortable>
        </el-table-column>
        <el-table-column prop="balance" label="余额" min-width="100" sortable>
        </el-table-column>
        <el-table-column prop="useStatus" label="激活状态" width="100" :formatter="formatSex">
        </el-table-column>
        <el-table-column prop="expireState" label="是否过期" min-width="100" :formatter="formatExpireState">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" min-width="160" :formatter="dateFormat" sortable>
        </el-table-column>
        <el-table-column prop="lastModifyTime" label="最后修改时间" min-width="160"  :formatter="dateFormat" sortable>
        </el-table-column>
      </el-table>
        <!--工具条-->
        <div class="block">
           <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]"
             :page-size="limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
           </el-pagination>
         </div>

      <!--新增界面-->
      <el-dialog title="新增" :visible.sync ="addFormVisible" :close-on-click-modal="false">
        <el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
          <el-form-item label="地址" prop="name">
            <el-input v-model="addForm.walletAddressHash" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item  label="状态">
            <el-select v-model="addForm.useStatus" style="width: 100px;">
              <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item  label="类型">
            <el-select v-model="addForm.accountType"  style="width: 100px;">
              <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="addFormVisible = false">取消</el-button>
          <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
        </div>
      </el-dialog>

    </el-col>
  </el-row>
</template>

<script>
  import API from '../../api/api_book';
  import {base_url} from 'api/index';
  import moment from 'moment';
  export default {
    data() {
      return {
        filters: {
          name: '',
          address:''
        },
        loading: false,
        users: [],
        total: 0,
        currentPage:1,
        limit: 10,
        loading: false,
        statusOptions: [{
          value: 'true',
          label: '激活'
        },{
          value: 'false',
          label: '未激活'
        }],
        typeOptions: [{
          value: 'USDT',
          label: 'USDT'
        },{
          value: 'BITCOIN',
          label: 'BITCOIN'
        }],
        //新增相关数据
        addFormVisible: false,//新增界面是否显示
        addLoading: false,
        addFormRules: {
          walletAddressHash: [
            {required: true, message: '请输入地址', trigger: 'blur'}
          ],
          useStatus: [
            {required: true, message: '请输入状态', trigger: 'blur'}
          ],
          accountType: [
            {required: true, message: '请输入类型', trigger: 'blur'}
          ]
        },
        addForm: {
          walletAddressHash: '',
          useStatus: '',
          accountType: ''
        }
      }
    },
    methods: {
      //状态显示转换
      formatSex: function (row, column) {
        return row.useStatus == true ? '激活' : row.useStatus == false ? '未激活' : '未知';
      },
      formatExpireState: function (row, column) {
        return row.expireState == false ? '未过期' : row.expireState == true ? '已过期' : '未知';
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.search();
      },
      handleSearch(){
        this.total = 0;
        this.currentPage = 1;
        this.search();
      },
      handleSizeChange(val) {
        this.limit = val;
        this.search();
      },
      //时间格式化
      dateFormat:function(row, column) {
        var date = row[column.property];
        if (date == undefined) {
          return "";
        }
        return moment(date*1000).format("YYYY-MM-DD HH:mm:ss");
      },

      //获取列表
      search: function () {
        let that = this;
        let params = {
          pageNum: that.currentPage,
          pageSize: that.limit,
          walletAddressHash: that.filters.address
        };

        that.loading = true;
        API.walletColdList(params).then(function (result) {
          that.loading = false;
          if (result && result.list) {
            that.total = result.count;
            that.users = result.list;
          }
        }, function (err) {
          that.loading = false;
          that.$message.error({showClose: true, message: err.toString(), duration: 2000});
        }).catch(function (error) {
          that.loading = false;
          console.log(error);
          that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
        });
      },
      selsChange: function (sels) {
        this.sels = sels;
      },
      showAddDialog: function () {
        this.addFormVisible = true;
        this.addForm = {
          walletAddressHash: '',
          useStatus: '',
          accountType: ''
        };
      },
      //新增
      addSubmit: function () {
        let that = this;
        this.$refs.addForm.validate((valid) => {
          if (valid) {
            that.loading = true;
            let para = Object.assign({}, this.addForm);
            //para.publishAt = (!para.publishAt || para.publishAt === '') ? '' : util.formatDate.format(new Date(para.publishAt), 'yyyy-MM-dd');
            API.addCold(para).then(function (result) {
              that.loading = false;
              console.log(result);
              if (result && parseInt(result.code) === 200) {
                that.$message.success({showClose: true, message: result.msg, duration: 2000});
                that.$refs['addForm'].resetFields();
                that.addFormVisible = false;
                that.search();
              } else {
                that.$message.error({showClose: true, message: result.msg, duration: 2000});
              }
            }, function (err) {
              that.loading = false;
              that.$message.error({showClose: true, message: err.toString(), duration: 2000});
            }).catch(function (error) {
              that.loading = false;
              console.log(error);
              that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
            });

          }
        });
      },
      //导出excel表格
        handleDownload() {
            //参数赋
            //拼接参数
            window.location.href = base_url + "/wallet/exportWalletHotList";
        },
    },
    mounted() {
      this.handleSearch()
    }
  }
</script>

<style scoped>

</style>
